<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 容器，用来挂载vue实例，这个元素就是vue代码的作用范围 -->
    <div id="app">
        <!-- 文本插值，插值表达式，里面写的是js代码，可以包含变量、逻辑、计算、函数调用 -->
        <p>单价：{{cart.price}}</p>
        <input type="text" v-model="cart.price">
        <div>{{isJiefeng?'出去疯':'在家封'}}</div>
        <div>我的爱好：{{hobby[0]}}</div>
        <div>{{sayHi()}}</div>
    </div>
    <!-- 第一步，先引入vue，确保在使用Vue之前引入 -->
    <script src="./js/vue.js"></script>
    <!-- 第二步，写自己的代码，配置vue的选项以及自己的逻辑 -->
    <script>
        // vue在这里起到了mvvm中的vm的作用，所以用这个变量名
        let vm = new Vue ({
            el: '#app', // el是element的缩写，用来指定将vue示例挂载到哪里
            data: {
                // 数据 用来初始化页面中的各个响应式数据，所有的响应式数据都放在这里
                cart: {
                    price: 9999,
                    num: 5
                },
                // 是否解封
                isJiefeng: false,
                classNo: 145,
                hobby: ['唱','跳','rap','打篮球']
            },
            // 函数放这里
            methods: {
                sayHi() {
                    return 'Hi~'
                },
                fn1() {

                },
                fn2() {
                    
                }
            }
        })
    </script>
</body>
</html>